<template>
  <div>
    <el-table
      :data="cartList"
      style="width: 100%"
      @cell-mouse-enter="setGoodId"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="商品图片" width="400">
        <template slot-scope="scope">
          <img :src="scope.row.goodImgUrl" alt="图片缺失" class="goodImg" />
          <div class="goodName">{{scope.row.goodName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="商品信息" width="400">
        <template slot-scope="scope">
          <div class="goodName">{{scope.row.goodName}}</div>
          <div>{{scope.row.goodInfo}}</div>
        </template>
      </el-table-column>

      <el-table-column prop="goodNowPrice" label="单价" width="180"></el-table-column>
      <el-table-column prop="count" label="数量">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.count"
            @change="handleChange"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </template>
      </el-table-column>
    </el-table>

    <!-- <div v-for="(item,index) in cartList" :key="item.key" class="item">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="item.goodImgUrl" />
        <div style="padding: 14px;">
          <span>{{item.goodName}}</span>
          <span>{{item.goodNowPrice}}</span>
          <div class="bottom clearfix">
            <span>数量:{{item.count}}</span>
            <el-input-number
              v-model="cartList[index].count"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              @focus="setGoodId(index)"
            ></el-input-number>
          </div>
        </div>
      </el-card>
    </div>-->

    <!-- 选择地址进行下单 -->

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-table
          ref="singleTable"
          :data="addressLists"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column property="userName" label="收件人" width="120" prop="userName"></el-table-column>
          <el-table-column property="userPhone" label="电话" width="120" prop="userPhone"></el-table-column>
          <el-table-column property="userAddress" label="地址" prop="userAddress"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitOrder">下单</el-button>
      </span>
    </el-dialog>

    <div class="count">
      总价 {{this.count}}
      <el-button type="primary" @click="delGood">删除选中的商品</el-button>
      <el-button type="primary" @click="dialogVisible = true">提交订单</el-button>
    </div>
  </div>
</template>

<script>
import {
  getUserCart,
  addGoodCartCount,
  subGoodCartCount,
  delGoodCart,
  getUserAddress,
  createdUserOrder,
} from "../api/requestapi";
export default {
  name: "GoodCart",

  data() {
    return {
      //购物清单
      cartList: [],

      //当前被选择商品id
      index: "",

      //被选中的商品id 以及数量
      checkedGood: [],

      //总计
      count: 0,

      //控制地址选择框
      dialogVisible: false,

      //用户地址信息
      addressLists: [],

      //被选中地址信息
      userAddressInfo: {
        userName: "",
        userPhone: "",
        userAddress: "",
      },

      //订单请求参数

      orderParams: {
        goodId: [],
        userName: "",
        userPhone: "",
        userAddress: "",

        goodCount: [],
        total: "",
      },
    };
  },

  methods: {
    //刷新购物车
    initCart() {
      getUserCart().then((response) => {
        this.cartList = response.data;
        this.count = 0;

        //初始化价钱
        for (var item of this.checkedGood) {
          console.log(item);
          this.count = this.count + item.count * item.goodNowPrice;
        }
        //刷新被选中的商品
        this.checkedGood = [];
        //刷新当前被选中的商品
        this.index = "";
      });
    },

    //获取用户地址信息
    getAddress() {
      getUserAddress().then((response) => {
        this.addressLists = response.data;
      });
    },

    //修改购物车数量
    handleChange(now, old) {
      if (now > old) {
        addGoodCartCount(this.index)
          .then((response) => {
            //遍历id 改变数量
            for (item of this.cartList) {
              if (item.goodId == this.index) {
                item.count = item.count + 1;
              }
            }
          })
          .catch((err) => {});
      } else {
        subGoodCartCount(this.index)
          .then((response) => {
            for (item of this.cartList) {
              if (item.goodId == this.index) {
                item.count = item.count - 1;
              }
            }
          })
          .catch((err) => {});
      }
    },

    //设置当前选中的商品
    setGoodId: function (row, column, cell, event) {
      console.log(row);
      this.index = row.goodId;
    },

    //多选商品
    handleSelectionChange(val) {
      this.checkedGood = [];
      for (var item of val) {
        this.checkedGood.push(item);
      }
      //加入存入的值 清空购物车价格
      if (this.checkedGood.length == 0) {
        //初始化价钱
        this.count = 0;
      }
    },

    //设置选择的地址
    handleCurrentChange(val) {
      this.userAddressInfo.userAddress = val.userAddress;
      this.userAddressInfo.userPhone = val.userPhone;
      this.userAddressInfo.userName = val.userName;
    },

    //查看选中的商品
    handleCheckedGoodChange(val) {
      console.log(this.checkedGood);
    },

    //删除购物车商品
    delGood() {
      //采用这种方式传入数组
      var param = new URLSearchParams();
      for (var item of this.checkedGood) {
        param.append("checkedGood", item.goodId);
      }
      delGoodCart(param).then((response) => {
        this.initCart();
      });
    },

    //创建订单
    commitOrder() {
      // this.orderParams.goodId = this.checkedGood;
      this.orderParams.addressId = this.userAddress;
      this.orderParams.total = this.count;

      for (var item of this.checkedGood) {
        // for (var item of this.cartList) {
        //   if (item.goodId == goodId) {
        //     this.orderParams.goodCount.push(item.count);
        //   }
        // }
        this.orderParams.goodId.push(item.goodId);
        this.orderParams.goodCount.push(item.count);
      }

      this.orderParams.userAddress = this.userAddressInfo.userAddress;
      this.orderParams.userPhone = this.userAddressInfo.userPhone;
      this.orderParams.userName = this.userAddressInfo.userName;

      createdUserOrder(this.orderParams).then((response) => {
        if (response.code == 200) {
          this.initCart();
        }
      });
    },
  },

  created() {
    this.initCart();
    this.getAddress();
  },

  watch: {
    checkedGood: {
      handler() {
        // 购物车金额清0
        this.count = 0;
        for (var item of this.checkedGood) {
          // 遍历选中
          this.count = this.count + item.count * item.goodNowPrice;
        }
      },
      //监听具体对象
      deep: true,
    },
  },
};
</script>

<style>
.item {
  margin: 0 auto;
  margin-bottom: 30px;
  text-align: center;
  width: 800px;
}

.count {
  height: 300px;
  background-color: white;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 30px;
  bottom: 0px;
}

.goodImg {
  width: 300px;
  height: 300px;
}

.goodName {
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  font-size: 15px;
}
</style>